<template>
  <el-form :model="loginForm" label-width="auto" style="text-align: center; margin-left: 40%;margin-top: 15%;" v-if="ShowLoginPanel" >
    <el-form-item label="账号:" style="text-align: center;">
      <el-input v-model="loginForm.accountInput" style="width: 240px" placeholder="输入用户名或账号"/>
    </el-form-item>
    <el-form-item label="密码:" style="text-align: center;">
      <el-input v-model="loginForm.pwdInput" style="width: 240px" placeholder="输入密码" type="password"/>
    </el-form-item>
    <el-form-item style="text-align: center;">
      <el-button type="primary" plain @click="clearInput" style="margin-right: 72px; width: 100px;">重置</el-button>
      <el-button type="primary" @click="onLoginClick" style="width: 100px;">登录</el-button>
    </el-form-item>
  </el-form>
  <div>
    <el-container v-show="ShowMainPanel">
      <el-aside width="300px">
        <el-menu style="height: 100%;">
          <el-menu-item @click="onSystemInfoButtonClick">
            <el-icon><House /></el-icon>
            系统信息
          </el-menu-item>
          <el-menu-item v-show="FileManagerButton" @click="onFileManagerButtonClick">
            <el-icon><Folder /></el-icon>
            文件管理
          </el-menu-item>
          <el-menu-item v-show="FileManagerButton" @click="switchShowPanel('SmallToolPanel')">
            <el-icon><Tools /></el-icon>
            工具
          </el-menu-item>
          <el-menu-item v-show="ScreenStreamButton" @click="onScreenStreamButtonClick">
            <el-icon><Monitor /></el-icon>
            投屏
          </el-menu-item>
          <el-menu-item v-show="UserManagerButton" @click="onUserManagerButtonClick">
            <el-icon><User /></el-icon>
            用户管理
          </el-menu-item>
          <el-menu-item @click="refresh">
            <el-icon><Back /></el-icon>
            退出
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="50px">
          <el-text style="margin-left: 15px; margin-top: 8px; font-size: 35px;">{{ HeaderText }}</el-text>
        </el-header>
        <el-main style="height: 680px; flex-grow: 1;">
          <div v-if="SysteminfoPanel" style="width: auto; height: auto;">
            <el-card style="width: 50%; float: left; margin-right: 20px; height: auto;" v-if="SystemInfo != null">
              <el-menu>
                <el-menu-item>
                  <p style="float: left;">系统:</p>
                  <p style="width: 100%; text-align: right;">
                    {{ SystemInfo.OsName }}
                    <img v-if="SystemInfo.OsName === 'Windows 11'" src="../src/icon/win11.png" style="width: 25px; height: 25px; padding: 0px; text-align: right; vertical-align: middle;"/>
                    <img v-else src="../src/icon/win8.png" style="width: 25px; height: 25px; padding: 0px; text-align: right; vertical-align: middle;"/>
                  </p>
                </el-menu-item>
                <el-menu-item>
                  <p style="float: left;">内核版本:</p>
                  <p style="width: 100%; text-align: right;">
                    {{ SystemInfo.OsVersion }}
                  </p>
                </el-menu-item>
                <el-menu-item>
                  <p style="float: left;">硬件架构:</p>
                  <p style="width: 100%; text-align: right;">
                    {{ SystemInfo.OsArch }}
                  </p>
                </el-menu-item>
                <el-menu-item>
                  <p style="float: left;">BIOS:</p>
                  <p style="width: 100%; text-align: right;">
                    {{ SystemInfo.MotherBoard }}
                  </p>
                </el-menu-item>
                <el-sub-menu index="1">
                  <template #title>
                    <span>CPU</span>
                  </template>
                  <el-menu-item>
                    <p style="float: left;">Vendor:</p>
                    <div style="width: 100%; text-align: right;">
                      <img v-if="SystemInfo.CpuFactory === 'AMD'" src="../src/icon/amd.png" style="width: 25px; height: 25px; padding: 0px; text-align: right; vertical-align: middle;"/>
                      <img v-else-if="SystemInfo.CpuFactory === 'Intel'" src="../src/icon/intel.png" style="width: 25px; height: 25px; padding: 0px; text-align: right; vertical-align: middle;"/>
                      <p v-if="SystemInfo.CpuFactory != 'AMD' && SystemInfo.CpuFactory != 'Intel'">{{ SystemInfo.CpuFactory }}</p>
                    </div>
                  </el-menu-item>
                  <el-menu-item>
                    <p style="float: left;">型号:</p>
                    <div style="width: 100%; text-align: right;">
                      <p>{{ SystemInfo.Cpu }}</p>
                    </div>
                  </el-menu-item>
                  <el-menu-item>
                    <p style="float: left;">核心:</p>
                    <div style="width: 100%; text-align: right;">
                      <p>{{ SystemInfo.CpuCore }}</p>
                    </div>
                  </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                  <template #title>
                    <span>GPU</span>
                  </template>
                  <el-menu-item v-for="(gpu,index) in SystemInfo.GraphicCard" :key="gpu">
                    <p style="float: left;">显卡{{ index + 1 }}</p>
                    <div style="width: 100%; text-align: right;">
                      <p>{{ gpu }}</p>
                    </div>
                  </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                  <template #title>
                    <span>RAM</span>
                  </template>
                  <el-menu-item v-for="(ram,index) in SystemInfo.Ram" :key="ram">
                    <p style="float: left;">插槽{{ index + 1 }}</p>
                    <div style="width: 100%; text-align: right;">
                      <p>{{ ram }}</p>
                    </div>
                  </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                  <template #title>
                    <span>ROM</span>
                  </template>
                  <el-menu-item v-for="(rom,index) in SystemInfo.Disk" :key="rom" style="height: auto;">
                    <p style="float: left;">硬盘{{ index + 1 }}</p>
                    <div style="width: 100%; 
                                text-align: right;
                                height: auto;  
                                word-wrap:break-word;  
                                word-break:break-all;  
                                overflow:hidden;">
                      <p>{{ rom }}</p>
                    </div>
                  </el-menu-item>
                </el-sub-menu>
              </el-menu>
            </el-card>
            <el-card style="width: 45%; height: auto; float: left;">
              <el-row>
                <div style="float: left; width: auto; padding-left: 15px;">
                  <el-progress id="CpuBoard" type="dashboard" :width="200" :height="200" :percentage="CpuPercentage" :color="colors" />
                  <p style="text-align: center;">CPU占用</p>
                </div>
                <div style="float: left; width: auto; padding-left: 50px;">
                  <el-progress id="MemBoard" type="dashboard" :width="200" :height="200" :percentage="MemPercentage" :color="colors" />
                  <p style="text-align: center;">内存占用</p>
                </div>
                <div v-for="(disk,index) in DiskPercentage" :key="disk" style="width: 100%;">
                  <br>
                  <p>硬盘分区{{ index + 1 }}</p>
                  <el-progress :text-inside="false" :stroke-width="15" :percentage="disk" :color="colors" />
                </div>
              </el-row>
            </el-card>
            <el-card style="width: 45%; height: 100%; float: left; margin-top: 20px; padding-bottom: 20px;" v-if="UserManagerButton">
              <div style="float: left; width: 33%;">
                <span>
                  <el-button type="primary" text @click="refresh" style="width: 100%; height: 100px; border-width: 0px; text-align: center;">
                    <el-icon size="50px" style="text-align: center"><Refresh /></el-icon>
                  </el-button>
                  <p style="text-align: center;">刷新</p>
                </span>
              </div>
              <div style="float: left; width: 33%;">
                <span>
                  <el-button type="danger" text @click="refreshBack" style="width: 100%; height: 100px; border-width: 0px; text-align: center;">
                    <el-icon size="50px" style="text-align: center"><RefreshRight /></el-icon>
                  </el-button>
                  <p style="text-align: center;">后端重启</p>
                </span>
              </div>
              <div style="float: left; width: 33%;">
                <span>
                  <el-button type="danger" text @click="shutDown" style="width: 100%; height: 100px; border-width: 0px; text-align: center;">
                    <el-icon size="50px" style="text-align: center"><SwitchButton /></el-icon>
                  </el-button>
                  <p style="text-align: center;">后端关机</p>
                </span>
              </div>
            </el-card>
          </div>
          <div v-if="SmallToolPanel" style="width: auto; height: auto;">
            <div style="padding-left: 15px; padding-bottom: 15px;">
              <el-button type="primary" @click="SwitchTool('calendar')">
                <el-icon style="padding-right: 5px;" size="20px"><Calendar /></el-icon>
                日历
              </el-button>
              <el-button type="primary" @click="SwitchTool('note')">
                <el-icon style="padding-right: 5px;" size="20px"><Notebook /></el-icon>
                便签
              </el-button>
            </div>
            <div v-if="Tools.calendar">
              <el-card style="width: 60%; float: left; border: 0px;" shadow="never">
                <el-calendar v-model="CurrentDate" style="padding-left: 0px;" @click="getTodo"/>
              </el-card>
              <el-card style="width: auto; border: 0px; padding-left: 0px;" shadow="never">
                <el-menu>
                  <el-menu-item style="padding-left: 0px;">TODO:</el-menu-item>
                  <el-menu-item style="padding-left: 0px;">
                    <el-time-picker v-model="ChosenTime" placeholder="选择时间" style="width: 150px;"/>
                    <el-input v-model="TODOInput" placeholder="事项" style="width: 200px;"></el-input>
                    <el-button @click="insertTodo" type="primary">
                      <el-icon style="padding-left: 0px"><Plus /></el-icon>
                      添加
                    </el-button>
                  </el-menu-item>
                  <el-menu-item v-for="matter in ToDoList" :key="matter" style="padding-left: 0px;">
                    <el-button style="float: left; padding-left: 14px;" type="danger" icon="Delete" circle @click="deleteTodo(matter.id)"/>
                    <p style="float: left; padding-left: 10px;">{{ matter.time }} {{ matter.MatterIndex }}</p>
                  </el-menu-item>
                </el-menu>
              </el-card>
            </div>
            <div v-if="Tools.note">
              <el-card style="width: 30%; height: auto; float: left; margin-left: 15px; margin-bottom: 15px;">
                <template #header>
                  <div class="card-header">
                    <p>新增便签</p>
                  </div>
                </template>
                <span>
                  <el-button type="primary" text @click="addNote" style="width: 100%; height: 100px; border-width: 0px; text-align: center;">
                    <el-icon size="50px" style="text-align: center"><DocumentAdd /></el-icon>
                  </el-button>
                </span>
              </el-card>
              <el-card v-for="note in this.Notes" :key="note.id" style="width: 30%; height: auto; float: left; margin-left: 15px; margin-bottom: 15px;">
                <template #header>
                  <div class="card-header">
                    <el-input v-model="note.title" style="width: 100%; border: none;" @change="updateNote(note.id, note.title, note.index)" placeholder="标题"/>
                  </div>
                </template>
                <el-input v-model="note.index" style="width: 100%; border: none;" autosize type="textarea" @change="updateNote(note.id, note.title, note.index)" placeholder="正文内容"/>
                <template #footer>
                  <el-menu>
                      <el-menu-item style="padding: 0px;margin: 0px;">
                        <el-button style="float: left; margin-left: 0px; padding-left: 14px; margin-right: 5px" type="danger" icon="Delete" circle @click="deleteNote(note.id)"/>
                        上次修改时间: {{ note.time }}
                      </el-menu-item>
                    </el-menu>
                </template>
              </el-card>
            </div>
          </div>
          <el-menu ref="FileManager" v-if="FileManagerPanel" style="width: auto;">
              <el-menu-item>
                <el-input v-model="searchIndex" style="vertical-align: middle;width: 200px;" @change="getCurrentFolderIndex('',searchIndex,true)" @clear="getCurrentFolderIndex('',searchIndex,true)" placeholder="输入要搜索的文件夹名字" clearable></el-input>
                <el-button type="primary" @click="getCurrentFolderIndex('',searchIndex,true)" style="padding-left: 2px; margin-left: 10px;">
                  <el-icon><Search /></el-icon>
                  搜索
                </el-button>
                <el-button type="primary" @click="onBackPreviousClick" style="padding-left: 0px; margin-left: 10px;">
                  <el-icon><ArrowLeft /></el-icon>
                  上一级
                </el-button>
                <el-text style="margin-left: 10px;">当前路径:{{ CurrentFolderPath }}</el-text>
              </el-menu-item>
              <el-menu-item v-for="file in FileList" :key="file.FileName" @click="onFileBlockItemClick(file.FilePath, file.FileType)">
                <el-icon :size='25' style="margin-right: 5px;">
                  <Folder v-if="file.FileType === 'Folder'" />
                  <Coin v-else-if="file.FileType === 'Disk'" />
                  <Notebook v-else-if="file.FileType === 'Txt'" />
                  <Document v-else-if="file.FileType === 'Word'" />
                  <DataBoard v-else-if="file.FileType === 'PPT'" />
                  <TrendCharts v-else-if="file.FileType === 'Xls'" />
                  <Management v-else-if="file.FileType === 'Pdf'" />
                  <Box v-else-if="file.FileType === 'Zip'" />
                  <Film v-else-if="file.FileType === 'Video'" />
                  <Picture v-else-if="file.FileType === 'Photo'" />
                  <Files v-else-if="file.FileType === 'File'"/>
                </el-icon>
                {{ file.FileName }}
              </el-menu-item>
          </el-menu>
          <el-main v-if="ScreenStreamPanel" ref="ScreenStream" style="width: auto;">
            <video width="100%" height="100%" ref="videoElement" autoplay muted @mousemove="controlBack" @click="controlMouse(0)" @contextmenu="controlMouse(1)"></video>
          </el-main>
          <el-menu v-if="UserManagerPanel" style="width: auto;">
            <el-menu-item>
              <div style="float: left;width: 14%">
                <p>账号</p>
              </div>
              <div style="float: left;width: 20%">
                <p>用户名</p>
              </div>
              <div style="float: left;width: 20%">
                <p>密码</p>
              </div>
              <div style="float: left;width: 10%">
                <p>文件管理权限</p>
              </div>
              <div style="float: left;width: 10%">
                <p>远程浏览权限</p>
              </div>
              <div style="float: left;width: 10%">
                <p>完全控制权限</p>
              </div>
              <div style="float: left;width: 14%">
                <el-button type="primary" style="vertical-align: middle; margin-left: 48%;" @click="createUser">新增用户</el-button>
              </div>
            </el-menu-item>
            <el-menu-item v-for="user in UserList" :key="user.Account">
              <div style="float: left;width: 14%">
                <p>{{ user.Account }}</p>
              </div>
              <div style="float: left;width: 20%">
                <el-input v-model="user.name" style="vertical-align: middle; width: 80%;" @change="updateUserName(user.name,user.Account)"></el-input>
              </div>
              <div style="float: left;width: 20%">
                <el-input v-model="user.Password" style="vertical-align: middle; width: 80%;" @change="updateUserPassword(user.Password,user.Account)" type="password"></el-input>
              </div>
              <div style="float: left;width: 10%">
                <el-switch v-model="user.DownloadFile" @change="updateUserPermission('DownloadFile', user.Account, user.DownloadFile)"></el-switch>
              </div>
              <div style="float: left;width: 10%">
                <el-switch v-model="user.RemoteControl" @change="updateUserPermission('RemoteControl', user.Account, user.RemoteControl)"></el-switch>
              </div>
              <div style="float: left;width: 10%">
                <el-switch v-model="user.Root" @change="updateUserPermission('Root', user.Account, user.Root)"></el-switch>
              </div>
              <div style="float: left;width: 14%">
                <el-button type="danger" style="vertical-align: middle; margin-left: 65%;" @click="deleteUser(user.Account)">删除</el-button>
              </div>
            </el-menu-item>
          </el-menu>
        </el-main>
      </el-container>
    </el-container>
  </div>  
</template>

<style>

</style>

<script>
import axios from "axios";
import cookies from "vue-cookies";
import { ref, createVNode, render, onMounted } from 'vue';
import flvjs from "flv.js";
import { Calendar, Notebook, RefreshRight, Search, SwitchButton, Tools } from "@element-plus/icons";
import { ElNotification } from 'element-plus';
import { Md5 } from 'ts-md5';

const FileCompenent = [];
const FileManager = ref();
const ScreenStream = ref();

export default {
  data(){
    return{
      ToDoList: null,
      ChosenTime: null,
      TODOInput: null,
      timer: null,
      searchIndex: '',
      SystemInfo: null,
      SysteminfoPanel: false,
      flvPlayer: null,
      ShowLoginPanel: true,
      ShowMainPanel: false,
      FileManagerButton: false,
      UserManagerButton: false,
      ScreenStreamButton: false,
      HeaderText: '',
      FileManagerPanel: false,
      ScreenStreamPanel: false,
      UserManagerPanel: false,
      loginForm:{
        accountInput: '',
        pwdInput: ''
      },
      Tools:{
        calendar: true,
        note: false,
      },
      FileList: [],
      CurrentFolderPath: 'null',
      reg: new RegExp('%5C','g'),
      UserList: [],
      osInfo: null,
      CpuPercentage: ref(10),
      MemPercentage: ref(10),
      DiskPercentage: [],
      colors: [
        { color: '#7DFFA0', percentage: 10 },
        { color: '#00FF44', percentage: 20 },
        { color: '#00FFFF', percentage: 30 },
        { color: '#6FDEFF', percentage: 40 },
        { color: '#1989fa', percentage: 50 },
        { color: '#FFFF77', percentage: 60 },
        { color: '#FFFF00', percentage: 70 },
        { color: '#e6a23c', percentage: 80 },
        { color: '#FF7700', percentage: 90 },
        { color: '#FF0000', percentage: 100 },
      ],
      windowLoop: null,
      SmallToolPanel: false,
      CurrentDate: null,
      Notes: null,
    }
  },

  methods: {
    deleteTodo(Todoid){
      const url = "http://192.168.137.1:9998/api/deleteTodo?cookie=" + cookies.get('cookie') + "&id=" + Todoid;
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.getTodo();
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
    },

    addNote(){
      const url = "http://192.168.137.1:9998/api/insertNote?cookie=" + cookies.get('cookie');
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.getAllNotes();
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
    },

    insertTodo(){
      if(!this.ChosenTime){
        this.showNotice('未选择时间。', 'Error', 'error');
        return;
      }

      if(!this.TODOInput){
        this.showNotice('未输入事项。', 'Error', 'error');
        return;
      }

      const url = "http://192.168.137.1:9998/api/insertTodo?cookie=" + cookies.get('cookie') + "&gmt=" + this.CurrentDate + "&time=" + this.ChosenTime + "&matter=" + this.TODOInput;
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.getTodo();
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
    },

    deleteNote(id){
      const url = "http://192.168.137.1:9998/api/deleteNote?cookie=" + cookies.get('cookie') + "&id=" + id;
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.getAllNotes();
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
    },

    updateNote(id, title, index){
      const url = "http://192.168.137.1:9998/api/updateNote?cookie=" + cookies.get('cookie') + "&id=" + id + "&title=" + title + "&index=" + index;
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.getAllNotes();
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
    },

    getTodo(){
      const url = "http://192.168.137.1:9998/api/getTodo?cookie=" + cookies.get('cookie') + "&gmt=" + this.CurrentDate;
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.ToDoList = JsonReturn.matters;
          console.log(JsonReturn);
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
    },

    SwitchTool(ToolName){
      this.Tools.calendar = false;
      this.Tools.note = false;

      if(ToolName === 'calendar'){
        this.Tools.calendar = true;
        this.CurrentDate = new Date();
      } 
      else if(ToolName === 'note') {
        this.Tools.note = true;
        this.getAllNotes();
      };
    },

    getAllNotes(){
      const url = "http://192.168.137.1:9998/api/getNotes?cookie=" + cookies.get('cookie');
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.Notes = JsonReturn.notes;
          console.log(JsonReturn);
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
    },

    controlBack(event){
      const offsetX = event.offsetX;
      const offsetY = event.offsetY;
      const elementX = this.$refs.videoElement.getBoundingClientRect().width;
      const elementY = this.$refs.videoElement.getBoundingClientRect().height;

      console.log('offsetY=' + event.offsetY);
      console.log(this.$refs.videoElement.getBoundingClientRect());

      const url = "http://192.168.137.1:9998/api/moveMouse?cookie=" + cookies.get('cookie') + "&offsetX=" + offsetX + "&offsetY=" + offsetY + "&elementX=" + elementX + "&elementY=" + elementY; 
      axios.get(url).then(res => {});
    },

    controlMouse(keycode){
      const url = "http://192.168.137.1:9998/api/clickMouse?cookie=" + cookies.get('cookie') + "&key=" + keycode; 
      axios.get(url).then(res => {});
    },

    onLoginClick(){
      this.stopFlv();

      const account = this.loginForm.accountInput;
      const pwd = this.loginForm.pwdInput;

      const url = "http://192.168.137.1:9998/login?account=" + account + "&password=" + this.encryption(pwd);
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          //set cookie
          if(cookies.isKey('cookie')){
            cookies.remove("cookie");
          }
          cookies.set('cookie', JsonReturn.Cookie);

          //get permission
          const permissionUrl = "http://192.168.137.1:9998/api/allPermission?cookie=" + cookies.get('cookie');
          axios.get(permissionUrl).then(res => {
            const JsonReturn = JSON.parse(JSON.stringify(res.data));
            if(JsonReturn.Status === 0){
              this.ShowLoginPanel=false;
              this.ShowMainPanel=true;
              if(JsonReturn.DeleteFile || JsonReturn.DownloadFile || JsonReturn.UploadFile){
                this.FileManagerButton=true;
              }
              if(JsonReturn.RemoteControl){
                this.ScreenStreamButton=true;
              }
              if(JsonReturn.Root){
                this.UserManagerButton=true;
              }
            }
            else{
              this.ShowLoginPanel=true;
              this.ShowMainPanel=false;
            }
          });
        }
        else if(JsonReturn.Status === 1){
          this.showNotice('服务器无响应', 'Error', 'error');
        }
        else if(JsonReturn.Status === 2){
          this.showNotice('密码错误', 'Error', 'error');
        }
      });
    },

    onFileManagerButtonClick(){
      this.stopFlv();
      this.HeaderText='文件管理';
      this.switchShowPanel('FileManagerPanel');

      const currentDictory = 'http://192.168.137.1:9998/api/getCurrentPath?cookie=' + cookies.get('cookie');
      axios.get(currentDictory).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 1){
          this.switchShowPanel('LoginPanel');
        }
        else{
          cookies.set('currentPath', JsonReturn.Path);
          this.CurrentFolderPath=JsonReturn.Path.replace(this.reg, '\\');
          const getDictoryIndex = 'http://192.168.137.1:9998/api/getDirectoryIndex?cookie=' + cookies.get('cookie') + '&path=' + cookies.get('currentPath');
          axios.get(getDictoryIndex).then(res => {
            const JsonReturn1 = JSON.parse(JSON.stringify(res.data));
            if(JsonReturn1.Status === 0){
              this.FileList=JsonReturn1.FileList;
            } else if (JsonReturn1.Status === 1){
              this.switchShowPanel('LoginPanel');
            } else {
              this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
            }
          });
        }
      });
    },

    onSystemInfoButtonClick(){
      this.stopFlv();
      this.HeaderText='系统信息';
      this.switchShowPanel('SystemInfoPanel');
      const url = "http://192.168.137.1:9998/api/getSystemInfo?cookie=" + cookies.get('cookie');
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.SystemInfo=JsonReturn;
        } else {
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
      this.windowLoop=window.setInterval(this.getSystemUsage, 3000);
    },

    onScreenStreamButtonClick(){
      this.stopFlv();
      this.HeaderText='投屏';
      this.switchShowPanel('ScreenStreamPanel');

      const streamApi = 'http://192.168.137.1:9998/api/getVideoStream?cookie=' + cookies.get('cookie');
      axios.get(streamApi).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if(JsonReturn.Status === 0){
          if (flvjs.isSupported()) {
            let videoElement = this.$refs.videoElement;
            this.flvPlayer = flvjs.createPlayer
            ({
              type: "flv", //媒体类型
              url: JsonReturn.url, //flv格式媒体URL
              isLive: true, //数据源是否为直播流
              hasAudio: false, //数据源是否包含有音频
              hasVideo: true, //数据源是否包含有视频
              enableStashBuffer: true, //是否启用缓存区
            },
            {
              enableWorker: false, // 是否启用分离的线程进行转换
              enableStashBuffer: false, //关闭IO隐藏缓冲区
              autoCleanupSourceBuffer: true, //自动清除缓存
            });
            this.flvPlayer.attachMediaElement(videoElement); //将播放实例注册到节点
            this.flvPlayer.load(); //加载数据流
            this.timer = setTimeout(() => {
              this.flvPlayer && this.flvPlayer.play();
            },500);
          }
        }
      });
    },

    onUserManagerButtonClick(){
      this.stopFlv();
      this.HeaderText='用户管理';
      this.switchShowPanel('UserManagerPanel');

      const currentDictory = 'http://192.168.137.1:9998/api/getUserList?cookie=' + cookies.get('cookie');
      axios.get(currentDictory).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.UserList=JsonReturn.Users;
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
    },

    switchShowPanel(panelName){
      this.FileManagerPanel=false;
      this.ScreenStreamPanel=false;
      this.UserManagerPanel=false;
      this.SysteminfoPanel=false;
      this.SmallToolPanel=false;
      clearInterval(this.windowLoop);
      if(panelName === 'FileManagerPanel'){
        this.FileManagerPanel=true;
      } else if(panelName === 'SystemInfoPanel'){
        this.SysteminfoPanel = true;
      } else if(panelName === 'ScreenStreamPanel'){
        this.ScreenStreamPanel=true;
      } else if(panelName === 'UserManagerPanel'){
        this.UserManagerPanel=true;
      } else if(panelName === 'LoginPanel'){
        this.ShowLoginPanel = true;
        this.ShowMainPanel = false;
      } else if(panelName === 'SmallToolPanel'){
        this.stopFlv();
        this.SmallToolPanel = true;
        this.CurrentDate = new Date();
        this.HeaderText = '工具';
        if(this.Tools.calendar){
          this.getTodo();
        }
      }
    },

    onFileBlockItemClick(filePath, FileType){
      if(FileType === 'Folder' || FileType === 'Disk'){
        this.getCurrentFolderIndex(filePath, '', false);
      } else {
        this.downloadFile(filePath);
      }
    },

    onBackPreviousClick(){
      const getDictoryIndex = 'http://192.168.137.1:9998/api/getPreviousPath?cookie=' + cookies.get('cookie');   
      axios.get(getDictoryIndex).then(res => {
        const JsonReturn1 = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn1.Status === 0){
          this.getCurrentFolderIndex(JsonReturn1.PreviousPath);
        } else if (JsonReturn1.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else {
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
    },

    getCurrentFolderIndex(filePath,search,searchEnable){
      if(searchEnable){
        if(search.size != ''){
          const getDictoryIndex = 'http://192.168.137.1:9998/api/searchFile?cookie=' + cookies.get('cookie') + '&path=' + cookies.get('currentPath') + '&search=' + search;
          axios.get(getDictoryIndex).then(res => {
            const JsonReturn1 = JSON.parse(JSON.stringify(res.data));
            if(JsonReturn1.Status === 0){
              this.FileList=JsonReturn1.FileList;
            } else if (JsonReturn1.Status === 1){
              this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
              this.switchShowPanel('LoginPanel');
            } else {
              this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
              this.switchShowPanel('LoginPanel');
            }
          });
        }
        if(typeof search === 'undefined' || search == null || search === ''){
          const currentDictory = 'http://192.168.137.1:9998/api/getCurrentPath?cookie=' + cookies.get('cookie');
          axios.get(currentDictory).then(res => {
            const JsonReturn = JSON.parse(JSON.stringify(res.data));
            if(JsonReturn.Status === 1){
              this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
              this.switchShowPanel('LoginPanel');
            }
            else{
              cookies.set('currentPath', JsonReturn.Path);
              this.CurrentFolderPath=JsonReturn.Path.replace(this.reg, '\\');
              const getDictoryIndex = 'http://192.168.137.1:9998/api/getDirectoryIndex?cookie=' + cookies.get('cookie') + '&path=' + cookies.get('currentPath');
              axios.get(getDictoryIndex).then(res => {
                const JsonReturn1 = JSON.parse(JSON.stringify(res.data));
                if(JsonReturn1.Status === 0){
                  this.FileList=JsonReturn1.FileList;
                } else if (JsonReturn1.Status === 1){
                  this.switchShowPanel('LoginPanel');
                } else {
                  this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
                  this.switchShowPanel('LoginPanel');
                }
              });
            }
          });
        }
      }
      else{
        const getDictoryIndex = 'http://192.168.137.1:9998/api/getDirectoryIndex?cookie=' + cookies.get('cookie') + '&path=' + filePath; 
        axios.get(getDictoryIndex).then(res => {
          const JsonReturn1 = JSON.parse(JSON.stringify(res.data));
          if(JsonReturn1.Status === 0){
            this.FileList=JsonReturn1.FileList;
            cookies.set('currentPath', filePath);
            this.CurrentFolderPath=filePath.replace(this.reg, '\\');
          } else if (JsonReturn1.Status === 1){
            this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
            this.switchShowPanel('LoginPanel');
          } else {
            this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
            this.switchShowPanel('LoginPanel');
          }
        });
      }
    },

    downloadFile(filePath){
      const request='http://192.168.137.1:9998/api/downloadFile?cookie=' + cookies.get('cookie') + '&path=' + filePath;
      const link = document.createElement('a');
      link.style.display = 'none';
      fetch(request).then(res => res.blob()).then((blob) => {
        link.href = URL.createObjectURL(blob);
        link.download = filePath;
        document.body.appendChild(link);
        link.click();
        link.remove();
      });
    },

    stopFlv(url) {
      if (this.flvPlayer) {
        clearTimeout(this.timer);
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    },

    getSystemUsage() {
      const usageUrl = "http://192.168.137.1:9998/api/getSystemUsage?cookie=" + cookies.get('cookie');
      axios.get(usageUrl).then(res => {
        const JsonReturn1 = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn1.Status === 0){
          this.CpuPercentage=parseFloat(JsonReturn1.Cpu);
          this.MemPercentage=parseFloat(JsonReturn1.Mem);
          this.DiskPercentage=JsonReturn1.Disk;
        } else{
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }});
    },

    refresh(){
      window.location.reload();
    },

    refreshBack(){
      const usageUrl = "http://192.168.137.1:9998/api/getSystemControl?cookie=" + cookies.get('cookie') + "&method=restart";
      axios.get(usageUrl);
      this.refresh();
    },

    shutDown(){
      const usageUrl = "http://192.168.137.1:9998/api/getSystemControl?cookie=" + cookies.get('cookie') + "&method=shutdown";
      axios.get(usageUrl);
      this.refresh();
    },

    updateUserName(newName, userAccount){
      const url = "http://192.168.137.1:9998/api/updataUserInfo?cookie=" + cookies.get('cookie') + "&userAccount=" + userAccount + "&NameOrPassword=" + newName + "&updataItem=Name";
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.showNotice('用户' + userAccount + '用户名已改为' + newName, '已修改', 'success');
          this.UserList=JsonReturn.Users;
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 3){
          this.showNotice('该用户名重复', 'Error', 'error');
          this.UserList=JsonReturn.Users;
        } else if (JsonReturn.Status === 4){
          this.showNotice('新用户名长度不能小于1', 'Error', 'error');
          this.UserList=JsonReturn.Users;
        }});
    },

    updateUserPassword(newPassword, userAccount){
      const url = "http://192.168.137.1:9998/api/updataUserInfo?cookie=" + cookies.get('cookie') + "&userAccount=" + userAccount + "&NameOrPassword=" + this.encryption(newPassword) + "&updataItem=Password";
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.showNotice('用户' + userAccount + '密码已修改', '已修改', 'success');
          this.UserList=JsonReturn.Users;
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 4){
          this.showNotice('密码长度不能短于1', 'Error', 'error');
          this.UserList=JsonReturn.Users;
        }});
    },

    updateUserPermission(permissionName, userAccount, permission){
      const url = "http://192.168.137.1:9998/api/updataUserPermission?cookie=" + cookies.get('cookie') + "&userAccount=" + userAccount + "&permission=" + permission + "&permissionName=" + permissionName;
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.showNotice('用户' + userAccount + permissionName + '权限已修改至 ' + permission, '已修改', 'success');
          this.UserList=JsonReturn.Users;
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }});
    },

    deleteUser(userAccount){
      const url = "http://192.168.137.1:9998/api/deleteUser?cookie=" + cookies.get('cookie') + "&userAccount=" + userAccount;
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.UserList=JsonReturn.Users;
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }});
    },

    createUser(){
      const url = "http://192.168.137.1:9998/api/createUser?cookie=" + cookies.get('cookie');
      axios.get(url).then(res => {
        const JsonReturn = JSON.parse(JSON.stringify(res.data));
        if(JsonReturn.Status === 0){
          this.UserList=JsonReturn.Users;
        } else if (JsonReturn.Status === 1){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        } else if (JsonReturn.Status === 2){
          this.showNotice('Cookie错误,返回登录。', 'Error', 'error');
          this.switchShowPanel('LoginPanel');
        }
      });
    },

    showNotice(noticIndex,title,type){
      ElNotification({
        title: title,
        message: noticIndex,
        type: type,
        duration: 3000,
      })
    },

    clearInput(){
      this.loginForm.accountInput='';
      this.loginForm.pwdInput='';
    },

    encryption(str){
      const md5 = new Md5();
      md5.appendAsciiStr(str);
      return md5.end();
    }
  }
}
</script>
